<template>
  <div class="person-box">
    <!-- 头部用户信息部分 -->
    <div class="person-top">
      <!-- 服务器给的图片是错误的，只能用自己的图片代替一下 -->
      <!-- <img :src="info.headImg" /> -->
      <img src="./images/avator.jpg" />
      <h3>{{info.nickName}}</h3>
    </div>
    <!-- 我的资产部分 -->
    <div class="myaSsets">
      <!-- 为了切割线开头和网易严选一样 -->
      <h2 class="marRight">我的资产</h2>
      <van-grid :border="false" :column-num="5">
        <van-grid-item>
          <van-badge dot>
            <p class="moreWeight">￥0</p>
          </van-badge>
          <p>余额</p>
        </van-grid-item>
        <van-grid-item>
          <p class="moreWeight">0</p>
          <p>红包</p>
        </van-grid-item>
        <van-grid-item>
          <p class="moreWeight">1</p>
          <p>优惠卷</p>
        </van-grid-item>
        <van-grid-item>
          <p class="moreWeight">0</p>
          <p>积分</p>
        </van-grid-item>
        <van-grid-item>
          <p class="moreWeight">0</p>
          <p>礼品卡</p>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 九宫格部分 -->
    <van-grid :column-num="3" gutter=".5px">
      <van-grid-item
        v-for="item in gridArr"
        :key="item.id"
        :icon="item.icon"
        :text="item.type"
      />
    </van-grid>
    <!-- 退出登录部分 -->
    <div class="logout">
      <button @click="logout">退出登录</button>
    </div>
    
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: "Personal",
  data() {
    return {
      gridArr: [
        // grid数组
        { id: 0, icon: "orders-o", type: "我的订单" },
        { id: 1, icon: "user-circle-o", type: "账号管理" },
        { id: 2, icon: "phone-o", type: "我的手机号" },
        { id: 3, icon: "calendar-o", type: "周六一起拼" },
        { id: 4, icon: "after-sale", type: "售后服务" },
        { id: 5, icon: "flag-o", type: "邀请返利" },
        { id: 6, icon: "diamond-o", type: "优先购" },
        { id: 7, icon: "gold-coin-o", type: "积分中心" },
        { id: 8, icon: "vip-card-o", type: "会员俱乐部" },
        { id: 9, icon: "logistics", type: "地址管理" },
        { id: 10, icon: "certificate", type: "支付安全" },
        { id: 11, icon: "service-o", type: "帮助与客服" },
        { id: 12, icon: "smile-comment-o", type: "意见反馈" },
        { id: 13, icon: "aim", type: "我的竞拍" },
      ],
    };
  },
  computed:{
    ...mapState({
      info:state => state.user.info
    })
  },
  methods:{
    logout() {
      this.$dialog.confirm({
        title: "退出登录",
        message: "是否退出登录",
      })
        .then(() => {
          // on confirm
          this.$store.dispatch('logout')
          this.$router.push('/login')
        })
        .catch(() => {
          // on cancel
        });
    },
  }
};
</script>

<style lang="less" scoped>
.moreWeight {
  font-size: 15px !important;
  font-weight: bolder !important;
}
.person-box {
  background-color: #eee;
  height: 100%;
  width: 100%;
  // 头部用户信息
  .person-top {
    height: 135px;
    display: flex;
    align-items: center;
    font-size: 16px;
    padding: 20px 10px;
    box-sizing: border-box;
    background-color: #f4c77d;
    color: white;
    img {
      width: 70px;
      height: 70px;
      margin-right: 10px;
      border-radius: 50%;
    }
    h3 {
      flex: 1;
    }
  }
  // 我的资产
  .myaSsets {
    background-color: white;
    height: 113px;
    margin-bottom: 30px;
    .marRight {
      height: 53px;
      line-height: 53px;
      font-size: 8px;
      margin-left: 10px;
      box-sizing: border-box;
      border-bottom: 1px solid #d9d9d9;
    }
    .van-grid {
      height: 60px;
      .van-grid-item {
        p {
          font-size: 12px;
          padding: 5px;
        }
      }
    }
  }
}
// 退出登录
.logout {
  button {
    background-color: white;
    height: 50px;
    width: 100%;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 60px;
  }
}
</style>